<script setup lang="ts">
import { ref } from 'vue'
import goods from './components/goodsItem.vue'
import { useOrderGoodstStore } from '@/stores/index'
const store = useOrderGoodstStore()
store.getData()
const activeName = ref('zero')
const handleClick = async tab => {
  switch (tab.props.name) {
    case 'zero':
      store.setPageData({ ...store.pageData, orderState: 0 })
      await store.getData()
      break
    case 'first':
      store.setPageData({ ...store.pageData, orderState: 1 })
      await store.getData()
      break
    case 'second':
      store.setPageData({ ...store.pageData, orderState: 2 })
      await store.getData()
      break
    case 'third':
      store.setPageData({ ...store.pageData, orderState: 3 })
      await store.getData()
      break
    case 'four':
      store.setPageData({ ...store.pageData, orderState: 4 })
      await store.getData()
      break
    case 'five':
      store.setPageData({ ...store.pageData, orderState: 5 })
      await store.getData()
      break
    case 'six':
      store.setPageData({ ...store.pageData, orderStateo: 6 })
      await store.getData()
      break
  }
}
</script>
<template>
  <div class="orderGoods">
    <el-tabs
      type="border-card"
      v-model="activeName"
      @tab-click="handleClick"
      v-loading="store.show"
    >
      <el-tab-pane label="全部订单" name="zero"><goods></goods></el-tab-pane>
      <el-tab-pane lazy label="待付款" name="first"><goods></goods></el-tab-pane>
      <el-tab-pane lazy label="待发货" name="second"><goods></goods></el-tab-pane>
      <el-tab-pane lazy label="待收货" name="third"><goods></goods></el-tab-pane>
      <el-tab-pane lazy label="待评价" name="four"><goods></goods></el-tab-pane>
      <el-tab-pane lazy label="已完成" name="five"><goods></goods></el-tab-pane>
      <el-tab-pane lazy label="已取消" name="six"><goods></goods></el-tab-pane>
    </el-tabs>
  </div>
</template>
<style scoped lang="scss">
.orderGoods {
  width: 1000px;
}
</style>
